<template>
    <el-main
      class="el-mainContent height100 overflowYHidden"
      direction="vertical"
      ref="managerMain"
    >
      <header_item
        :headerArr="headerArr"
        @onBtnClick="onBtnClick"
        :multipleSelection="multipleSelection"
      />
      <div class="containerContentHeight">
        <!-- 字段扩展查询 -->
        <el-row ref="search">
          <search_item
            :searchItemArr="searchItemArr"
            @searchItemData="searchItemData"
          />
        </el-row>
        <!-- 字段扩展列表 -->
        <table_item
          ref="tableItem"
          :tableArr="tableArr"
          :tableListConHeight="tableListConHeight"
          @onRowClick="onRowClick"
          @changeMulSelection="changeChunkMulSelection"
          @onTableBtnClick="onTableBtnClick"
        />
        <!-- 分页 -->
        <el-row ref="pagination">
          <pagination_item
            :pagniArr="tableArr"
            :pagniObj="searchdata"
            @searchPagniItem="searchPagniItem"
          />
        </el-row>
      </div>
    </el-main>
  </template>
    
    <script>
  import { pxToRemScale } from "../../utils";
  
  export default {
    name: "chunk_item",
    props:[ 
      "headerArr",
      "searchItemArr" ,
      "tableArr",
      "searchChilddata",
    ],
    inject:['changeMultiSelection'],
    data() {
      return {
        searchdata: {},
        tableListConHeight: null,
        multipleSelection: [],
      };
    },
  
    created() {
    },
    watch: {
     searchChilddata: {
       handler(value) {
         this.searchdata = Object.assign({}, this.searchObj, { ...value })
      },
      deep: true,
      immediate: true,
    },
  },
    mounted() {
      let temp = pxToRemScale(
        this.$refs.search.$el.getClientRects()[0].height +
          this.$refs.pagination.$el.getClientRects()[0].height
      );
      this.tableListConHeight = `calc(100% - ${temp}rem)`;
    },
    methods: {
      onTableBtnClick(name,row){
        this.searchTableData({name:'tableClick',data:{rowData:row,rowName:name}})
      },
      onRowClick(row) {
        this.searchTableData({name:"rowClick", data:row});
      },
      searchItemData(val) {
        //不管是重置还是查询，以第一页数据为主
        this.searchdata = {
          ...this.searchdata,
          data: {
            ...this.searchdata.data,
            ...val,
          },
        };
        this.searchTableData({data:this.searchdata});
      },
      searchPagniItem(val) {
        this.searchdata = {
          ...this.searchdata,
          ...val,
        };
        this.searchTableData({data:this.searchdata});
      },
      changeChunkMulSelection(val) {
        if (val) {
          this.multipleSelection = val;
          this.changeMultiSelection(val)
        }
      },
      searchTableData( {name = "", data = {}}) {
        this.$emit("onChunkBtnClick", {name, data});
      },
      onBtnClick(name) {
          this.searchTableData({name:name});
      },
      clearSelection() {
        this.$refs.tableItem.clearSelection(); //手动清除
      },
      cancelInterval() {
        this.$refs.tableItem.cancelInterval();
      },
    },
  };
  </script>
    
    <style>
  </style>